<template>
  <a-form :form="form">
    <a-row :gutter="8">
      <a-col :md="20" :sm="12" class="col-wrapper">
        <stu-info1 ref="stuInfo1" :info.sync="info"/>
       </a-col>
      <a-col :md="4" :sm="12">
        <a-form-item
            label=""
            :labelCol="{span: 0,offset: 1}"
            :wrapperCol="{span: 20, offset: 1}"
            selfUpdate
          >
          <a-upload
            name="avatar"
            style="width:120px;height:120px;"
            listType="picture-card"
            class="avatar-uploader"
            :showUploadList="false"
            :action="uploadUrl"
            list-type="picture"
            :headers="{
              Authorization: $store.state.account.token
            }"
            @change="handleChange"
          >

            <img v-if="imageUrl" :src="imageUrl" style="width: 200px;height: 200px;" alt="avatar" />
            <div v-else>
              <a-icon :type="loading ? 'loading' : 'plus'" />
              <div class="ant-upload-text">上传照片</div>
            </div>
          </a-upload>
          <a-input v-decorator="['zpdz']" type="hidden"/>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>
<script>
import { mapState } from 'vuex'
import { debounce } from 'utils/common'
import stuInfo1 from './stuInfo1'

const selectArr = ['TYPE0011', 'TYPE0088', 'TYPE0078', 'TYPE0017', 'TYPE0037', 'TYPE0013', 'TYPE0012', 'TYPE0002', 'TYPE0015', 'TYPE0020', 'TYPE0001', 'TYPE0305', 'TYPE0024', 'TYPE0018', 'TYPE0023', 'TYPE0090', 'TYPE0006']
function getBase64 (img, callback) {
  const reader = new FileReader()
  reader.addEventListener('load', () => callback(reader.result))
  reader.readAsDataURL(img)
}
export default {
  // props: ['info'],
  props: {
    info: {
      type: Object,
      required: false,
      default: function () {
        return { zzmmm: '' }
      }
    }
  },
  data () {
    return {
      md: (12),
      uploadUrl:`${process.env.SERVICE_URL}upload/img`,
      selectMenu: {},
      loading: false,
      imageUrl: '',
      ssbyzy: { // 硕士毕业专业下拉
        list: [],
        fetching: false
      },
      dxbyzy: { // 大学毕业专业下拉
        list: [],
        fetching: false
      },
      graduateYearList: []
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  components: {stuInfo1},
  computed: {
    ...mapState({
      TYPE0006: state => state.app['TYPE0006'], // 职位
      TYPE0090: state => state.app['TYPE0090'], // 学士学位学科门类
      TYPE0023: state => state.app['TYPE0023'], // 入学前最后学位
      TYPE0018: state => state.app['TYPE0018'], // 入学前最后学历
      TYPE0024: state => state.app['TYPE0024'], // 外语熟练程度
      TYPE0305: state => state.app['TYPE0305'], // 学习方式
      TYPE0001: state => state.app['TYPE0001'], // 信仰宗教
      TYPE0020: state => state.app['TYPE0020'], // 政治面貌
      TYPE0015: state => state.app['TYPE0015'], // 国籍/地区
      TYPE0002: state => state.app['TYPE0002'], // 户口性质
      TYPE0012: state => state.app['TYPE0012'], // 婚姻状况
      TYPE0013: state => state.app['TYPE0013'], // 健康状况
      TYPE0037: state => state.app['TYPE0037'], // 港澳台侨
      TYPE0017: state => state.app['TYPE0017'], // 民族
      TYPE0078: state => state.app['TYPE0078'], // 血型
      TYPE0088: state => state.app['TYPE0088'], // 证件类型
      TYPE0011: state => state.app['TYPE0011'] // 性别
    })
  },
  watch: {
    info (val) {
      if (val.xh) {
        this.initForm()
      }
    }
  },
  created () {
    const curYear = new Date().getFullYear()
    function generateYearArray (start, end) {
      let arr = []
      let len = end - start
      for (let index = 0; index < len; index++) {
        arr.push(...[`${start + index}-07-01`,`${start + index}-12-31`])
      }
      return arr
    }
    this.graduateYearList = generateYearArray(curYear-100,curYear+20)
    selectArr.forEach(v => {
      this.$store.dispatch('app/setDictionary', v)
    })
    this.initSelectMenu()
  },
  methods: {
    filterOption (value, op) {
      return op.componentOptions.children[0].text.indexOf(value) !== -1
    },
    initForm () {
      // this.$api.student.stuXjInfo(this.xh).then(res => {
      this.$nextTick(() => {
        if(this.info.dxbyxxszsf){
          this.handlePChange(this.info.dxbyxxszsf, '' , 'dxbyxxdm')
        }
        if(this.info.sxsxwdwszsf){
          this.handlePChange(this.info.sxsxwdwszsf, '2' , 'sxsxwdwdm')
        }
        if(this.info.ssbyxxdsf){
          this.handlePChange(this.info.ssbyxxdsf, '3' , 'ssbyxxdm')
        }
        if(this.info.sssxwdwsf){
          this.handlePChange(this.info.sssxwdwsf, '4' , 'sssxwdwm')
        }
        if(this.info.dxbyzydm){
          this.fetchDxbyzy(this.info.dxbyzydm)
        }
        if(this.info.ssbyzym){
          this.fetchSsbyzy(this.info.ssbyzym)
        }
        if (this.info.zpdz) {
          this.imageUrl = `${process.env.IMG_URL}${this.info.zpdz}`
        }
        if (this.info.dxbyny) {
          this.info.dxbyny = this.info.dxbyny.format('YYYY-MM-DD')
        }
        if (this.info.ssbyny) {
          this.info.ssbyny = this.info.ssbyny.format('YYYY-MM-DD')
        }
        let keys = Object.keys(this.form.getFieldsValue())
        let obj = {}
        keys.forEach(key => {
          obj[key] = this.info[key]
        })
        this.form.setFieldsValue(obj)
      })
    },
    initSelectMenu () {
      let allRequest = [
        this.$api.base.areaList()
      ]
      Promise.all(allRequest).then(res => {
        this.selectMenu = {
          province: res[0].data
        }
      })
    },
    handleChange (info) {
      if (info.file.status === 'uploading') {
        this.loading = true
        return
      }
      if (info.file.status === 'done') {
        let path = info.file.response.data[0]
        this.form.setFieldsValue({zpdz: path})
        this.form.getFieldsValue()
        this.imageUrl = `${process.env.IMG_URL}${path}`
      }
    },
    beforeUpload (file) {
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('图片不能超过2MB!')
      }
      return isLt2M
    },
    setData (option, key) {
      this.form.setFieldsValue({[key]: option.data.attrs.name})
    },
    handlePChange(v, i, k) {
      this.form.setFieldsValue({[k]: ''})
      this.$api.base.schoolInfoQueryAll({xzqhsdm: v}).then(res => {
        this.$set(this.selectMenu, `schoolList${i}` , res.data)
      })
    },
    fetchSsbyzy: debounce(async function (value) {
        if(value && value.length > 1) {
          this.ssbyzy.fetching = true
          let { data } = await this.$api.dict.queryAll({
            typeCode: 'TYPE0010',
            nameOrCode: value
          })
          this.ssbyzy.list = data
          this.ssbyzy.fetching = false
        }
    }),
    fetchDxbyzy: debounce(async function (value) {
      if(value && value.length > 1){
        this.dxbyzy.fetching = true
        let { data } = await this.$api.dict.queryAll({
          typeCode: 'TYPE0010',
          nameOrCode: value
        })
        this.dxbyzy.list = data
        this.dxbyzy.fetching = false
      }
    })
  }
}
</script>

<style lang="less" scoped>
  /*.col-wrapper .ant-col-sm-12, .ant-col-md-8{*/
    /*min-height: 91px;*/
  /*}*/
</style>
